<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById('canvas')
      // 获取画笔
      const ctx = canvas.getContext('2d')

      ctx.font = '20px 宋体'
      ctx.fillText('柱状体', 100, 50)
      ctx.moveTo(100, 100)
      ctx.lineTo(100, 600)
      ctx.lineTo(700, 600)
      ctx.stroke()

      // ctx.moveTo(100, 100)
      // ctx.lineTo(700, 100)

      // ctx.moveTo(100, 200)
      // ctx.lineTo(700, 200)

      // ctx.moveTo(100, 300)
      // ctx.lineTo(700, 300)

      // ctx.moveTo(100, 400)
      // ctx.lineTo(700, 400)

      // ctx.moveTo(100, 500)
      // ctx.lineTo(700, 500)
      // 画横线
      for (var i = 100, j = 150, k = 0; i < 600; i += 100, k++) {
        ctx.moveTo(100, i)
        ctx.lineTo(700, i)
        ctx.fillText(`${j - k * 30}`, 60, i + 10)
      }
      ctx.fillStyle = 'gray'
      ctx.stroke()
      let arr = ['食品', '女装', '手机', '汽车']
      // 化柱形
      for (var i = 250, j = 0; i <= 700; i += 150) {
        // 间隔是150
        ctx.moveTo(i, 600)
        ctx.lineTo(i, 610)
        // 矩形的宽度是100,
        // 高度随机
        let height = Math.fround(Math.random() * 500)
        ctx.fillStyle = 'pink'
        ctx.fillRect(i - 125, 600 - height, 100, height)
        ctx.fillStyle = '#000'
        ctx.fillText(arr[j++], i - 100, 620)
      }
      ctx.stroke()
    </script>
  </body>
</html>
